<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向绑定 v-model指令</title>
</head>
<body>
    <script src="/js/vue.js"></script>
    <div id ="app">
        <!-- 数据双向绑定，表单控件在实际开发中非常常见，特别对于用户信息提交需要大量的表单-->
        <!-- vue 中使用v-model指令来实现表单中元素和数据的双向绑定-->
        <!-- input 标签，双向绑定是什么意思？也就是input内容发送改变的同时，后台数据也同时改变-->
        <input type="text" v-model:value="msg">{{msg}}
        <br>
        <!-- v-bind v-on-->
        <input type="text" :value="msg" @input="valueChange($event)">{{message}}
        <!-- v-model 其实就是v-bind和v-on的语法糖-->
        <!-- v-on:当我们输入内容时，因为input中v-model绑定message，所以能实时的把数据监听并传递到后台-->
        <!-- v-bind：当我们message发生改变的时候，应为胡子语法，实时的把数据绑定上来-->

        <!-- 除了input，还有多行文本 textarea标签-->
    </div>
    
    <script>
       let app =new Vue({
         el:"#app",
         data:{
           msg:'hello world',
           message:""
         },
         methods:{
            valueChange(event){
                this.message= event.target.value
            }
         },
       })
    </script>  
</body>
</html>